<template>
  <div class="Messages">
    <div class="allmain">
      <div class="main_title" style="text-align:center;">{{ MessageInfoList.title }}</div>
      <div class="main_time"  style="text-align:center;">{{ MessageInfoList.createTime }}</div>
      <div class="Main_tela ql-editor" v-html="MessageInfoList.content"></div>
	  <div class="pdf el-icon-document" v-if="MessageInfoList.enclosure" @click="toReadPdf(MessageInfoList.enclosure)">
	  	通知附件
	  </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "SystemMessages",
  data() {
    return {
      MessageInfoList: {},
    };
  },
  created() {
    console.log(this.$route.query.row);
    this.messageInfo();
  },
  methods: {
    back() {
      this.$router.go(-1); //返回上一层
    },
    messageInfo() {
      let query = {
        id: this.$route.query.row,
		// id: 33
      };
      request({
        url: "/generator/notification/front/info",
        method: "get",
        params: query,
		
      }).then((res) => {
        console.log(res);
		let _img=res.notification.content.replace(/<img/g, '<img style="max-width: 100%;" ')
		res.notification.content=_img
        this.MessageInfoList = res.notification;
      });
    },
	toReadPdf(url){
		window.location.href=url
	},
  },
};
</script>

<style scoped>
.topheader {
  width: 100%;
  background-color: black;
}
.Theadermain {
  height: 48px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  width: 95%;
  margin: 0 auto;
}
.headerimg {
  width: 0.8rem;
  margin-left: 10px;
  transform: rotate(180deg);
}
.allmain {
  padding: 20px;
}
.main_title {
  font-weight: bold;
}
.main_time {
  padding: 20px 0;
  color: #b6bfd0;
}
.main_titleP {
  text-indent: 2em;
}
.main_tImg {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}
.but {
  text-align: center;
}
.pdf{
		width: 100%;
		padding: 20px 12px;
		border-radius: 10px;
		border: #f8f8f8 solid 1px;
		box-shadow: #989898 4px 4px 7px -4px; 
		font-size: 16px;
	}
</style>